<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <title>编辑 & 添加</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/static/layuiadmin/layui/css/layui.css" media="all">
    <style>
        .layui-fluid {
            padding-top: 20px;
        }
        .input-toolbar {
            display: inline-block;
            position: absolute;
            top: 1px;
            right: 1px;
            height: 36px;
            line-height: 36px;
            border-radius: 0 2px 2px 0;
            border-left: 1px solid #e6e6e6;
            background-color: #eee;
            font-size: 0;
        }
        .input-toolbar .layui-icon {
            width: 36px;
            display: inline-block;
            text-align: center;
            border-right: 1px solid #e6e6e6;
            cursor: pointer;
        }
        .input-toolbar .layui-icon:hover {
            background-color: #e0e0e0;
        }
        .input-toolbar .layui-icon:last-child {
            border-right: 0;
        }
    </style>
</head>
<body>
<div class="layui-fluid">
    <form action="<?=url('', [], false)?>" class="layui-form" method="post" enctype="multipart/form-data" lay-filter="form">
        <input type="hidden" name="id" value="">
        <div class="layui-form-item">
            <label class="layui-form-label">名称</label>
            <div class="layui-input-block">
                <input type="text" name="name" value="" placeholder="请输入分类名称" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">标题</label>
            <div class="layui-input-block">
                <input type="text" name="title" value="" placeholder="请输入标题" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">封面图</label>
            <div class="layui-input-block">
                <input type="text" name="thumb" value="" placeholder="请输入封面图" class="layui-input">
                <div class="input-toolbar">
                    <i class="layui-icon upload" data-bind="[name='thumb']" title="点击上传">&#xe62f;</i>
                    <i class="layui-icon preview" data-bind="[name='thumb']" title="点击查看预览">&#xe64a;</i>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">关键字</label>
            <div class="layui-input-block">
                <input type="text" name="keywords" value="" placeholder="请输入关键字" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">描述</label>
            <div class="layui-input-block">
                <textarea name="description" class="layui-textarea" placeholder="请输入描述"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">排序号</label>
            <div class="layui-input-block">
                <input type="number" name="sort" value="" placeholder="排序号，由小到大" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item status">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-block">
                <?php foreach(\app\common\model\Category::status_datalist as $key => $val): ?>
                <input type="radio" name="status" value="<?=$key?>" title="<?=$val?>">
                <?php endforeach; ?>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn" lay-submit lay-filter="*">提交</button>
            </div>
        </div>
    </form>
</div>
<script src="/static/layuiadmin/layui/layui.js"></script>
<script>
    layui.use(['jquery', 'layer', 'form', 'upload'], function(){
        let form = layui.form
            ,$ = layui.jquery
            ,layer = layui.layer
            ,upload = layui.upload
            ,result = <?=$result ?? '{status:1}'?>;

        form.val('form', result);

        form.on('submit(*)', function (data) {
            let elem = $(data.elem);

            elem.addClass('layui-btn-disabled');

            fetch(data.form.action, {
                body: new FormData(data.form)
                ,method: 'POST'
                ,credentials: 'same-origin'
                ,headers: {
                    'X-Requested-With': 'XMLHttpRequest'
                }
            })
                .then(response => response.json())
                .then(function (result) {
                    elem.removeClass('layui-btn-disabled');

                    if (0 == result.code) {
                        layer.msg(result.msg, {end: () => location.reload()});
                    } else {
                        layer.alert(result.msg);
                    }
                })
                .catch(function (error) {
                    elem.removeClass('layui-btn-disabled');
                    layer.alert('发生错误:' + error);
                });

            return false;
        });

        upload.render({
            elem: '.upload'
            ,url: "<?=url('upload')?>"
            ,method: 'post'
            ,field: 'file'
            ,multiple: false
            ,accept:'images'
            ,data: {accept: 'application/json'}
            ,before: function () {
                // 显示加载动画
                layer.load();
            }
            ,done: function (res) {
                // 关闭加载动画
                layer.closeAll();

                if (res.code != 0) {
                    layer.alert(res.msg);
                    return ;
                }

                // 显示成功信息
                layer.msg('上传成功');
                console.log(this.item);
                $(this.item.data('bind')).val(res.data.src);
            }
            ,error: function (index, upload) {
                layer.closeAll();
                layer.msg('上传失败');
            }
        });

        // 图片预览
        $('.preview').click(function () {
            var bind = $(this).data('bind');
            if (!bind) {
                layer.msg('缺少属性: data-bind');
                return ;
            }

            var src = $(bind).val();
            if (!src) {
                layer.msg('图片地址为空');
                return ;
            }

            layer.photos({
                photos: {
                    "title": "预览",
                    "data": [{"src": src}]
                }
            });
        });
    });
</script>
</body>
</html>